<template>
  <div class="shop">

    <el-button size='mini'
      @click="exportData"
      type='primary'>导出数据</el-button>

    <!--搜索-->
    <el-button class="search"
      size='mini'
      @click="searchServiceData"
      type='primary'>搜索</el-button>
    <el-input class="search"
      size='mini'
      v-model="form.user_name"
      style="width:140px;"
      placeholder="请输入下单用户账号查询"></el-input>
    
    <el-select placeholder="订单状态"
               style="width:136px;float:right;margin-left:12px;"
               v-model="form.status"
               size='mini'>
      <el-option value="0" label="未支付">未支付</el-option>
      <el-option value="1" label="已支付">已支付</el-option>
      <!-- <el-option value="10" label="已支付">已核销</el-option>
      <el-option value="15" label="已支付">已取消</el-option> -->
      <!-- <el-option value="20" label="已支付">已关闭</el-option> -->
    </el-select>
    <!--起始时间、结束时间-->

    <el-date-picker v-model="form.end_time"
      type="date"
      style="width:136px;float:right;"
      value-format="yyyy-MM-dd"
      size='mini'
      placeholder="结束时间">
    </el-date-picker>
    <el-date-picker v-model="form.start_time"
      type="date"
      style="width:136px;float:right;margin-right:12px;"
      size='mini'
      value-format="yyyy-MM-dd"
      placeholder="开始时间"></el-date-picker>

    <el-table :data="tableData"
      style="width:100%;margin-top:20px;"
      max-height="720"
      :cell-style="tc"
      :header-cell-style="tccolor">
    <el-table-column label='订单编号' prop='out_order_no' width='140'></el-table-column>
     <el-table-column label='支付流水号' prop='pay_sn' width='140'></el-table-column>
   
    <el-table-column label='套餐名称' prop='title' >
    </el-table-column>
    <!-- <el-table-column label='商品件数' width="100">
      <template slot-scope="scope">
        {{scope.row.order_package[0].product_number}} <span class="lookup" @click="lookupSkuInformation(scope.row.id)">（查看）</span>
      </template>
    </el-table-column> -->
    <el-table-column label='下单用户'>
      <template slot-scope="scope">
        <p v-if="scope.row.username">{{scope.row.username}}</p>
        <p v-else>---</p>
      </template>
    </el-table-column>
    <el-table-column label='付款金额'>
      <template slot-scope="scope">
        <p>¥{{scope.row.actual_amount}}</p>
      </template>
    </el-table-column>
     <!-- <el-table-column label='服务区域' prop='regions'></el-table-column> -->

    <el-table-column label='支付状态' prop="pay_status_word">
      <template slot-scope="scope">
        <p v-if='scope.row.order_status == 1'>待支付</p>
        <p v-if='scope.row.order_status == 5'>已支付</p>
        <p v-if='scope.row.order_status == 10'>已核销</p>
        <p v-if='scope.row.order_status == 15'>已取消</p>
        <p v-if='scope.row.order_status == 20'>已关闭</p>
      </template>
    </el-table-column>
    

    <el-table-column label='邀请子账号'  >
      <template slot-scope="scope">
         {{scope.row.invitation_mobile}} | {{scope.row.invitation_name}}
      </template>
    </el-table-column>
        <el-table-column label='订单创建时间' prop="created_at" ></el-table-column>
    <!-- <el-table-column label='操作' fixed="right">
       <template slot-scope="scope">
         <el-button type='danager' @click="watchDdetailInfo(scope.row.ID)" size='mini'>详情</el-button>
       </template>
    </el-table-column> -->
    </el-table>

     <el-col :span="24">
      <div class="pagination">
        <el-pagination background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>

    <!--弹出服务详情-->
    <jdialog title="套餐商品详情" :visible.sync="isShopDetailSku" width="860px">
      <el-table
       :data="skuData"
       border=""
      style="width:96%; margin:20px;"
      max-height="720"
      :cell-style="tc"
      :header-cell-style="tccolor"
      >
      <el-table-column label='商品图片'>
        <template slot-scope="scope">
          <img style="width:100px;height:100px;"
              class="sku_pic_margin"
              :src="scope.row.pic_url? scope.row.pic_url : errorImg"
              alt />
        </template>
      </el-table-column>
      <el-table-column label='商品名称' prop='name'></el-table-column>
      <el-table-column label='商品id' prop='shop_id'></el-table-column>
      <el-table-column label='数量' prop='num'></el-table-column>
      <el-table-column label='商品sku' prop='sku'></el-table-column>
      <el-table-column label='售价'>
        <template slot-scope="scope">
          ¥{{scope.row.price}}
        </template>
      </el-table-column>
      <el-table-column label='物流信息' fixed="right">
         <template slot-scope="scope">
           <p style="color:#f4222d;cursor:pointer;" @click="lookWuliuInformation(scope.row.shop_id)">查看物流信息</p>
         </template>
      </el-table-column>
      </el-table>
    </jdialog>
  </div>
</template>

<script>
import errorImg from "@/assets/images/error_img.png";
import { API_BASE_URL } from "@/config";
import {serviceJoinOrder} from '@/api/autarky'
export default {
  data () {
    return {
      form: {
        is_export: 0,
        user_name: '',
        order_no: '',
        status:'',
        start_time: '',
        end_time: '',
        page: 1,
        size: 20,
        order_type:'45'
        
      },
      tableData: [],
      total: 0,


      //sku详情相关
      isShopDetailSku:false,
      currentSkuId:'',
      skuData:[{pic_url:'',name:'adidas 三叶草 男子经典鞋BD7676',shop_id:'10011002',num:'2',sku:'XL/黑色',price:'199.00'}],
      errorImg,

    }
  },
  mounted () {
     this.getorderservicePackageData()
  },
  methods: {


    //导出数据
    exportData () {
      this.form.is_export = 1;
      //重新请求数据
      this.getorderservicePackageData()
    },

    //搜索
    searchServiceData () {
      //重新请求服务数据
      this.getorderservicePackageData()
    },
    //查看商品件数sku信息
    lookupSkuInformation(ID){
      this.currentSkuId =  ID
      this.isShopDetailSku = true
    },
    //跳转详情页面
    watchDdetailInfo(id){
        console.log(id)
        this.$router.push({
          path:'./serviceDetailInfo',
          query:{
            serviceId:id
          }
        })
    },
    pageChange(page){
     this.form.page = page;
     //重新获取数据
     this.getorderservicePackageData()
    },
    //查看物流信息
    lookWuliuInformation(shop_id){
       console.log(shop_id)
    },
    //获取列表数据
    async getorderservicePackageData(){
      
        if(this.form.status == 2){
          this.form.status = ''
        }
      //   if(this.form.start_time == null){
      //   this.form.start_time =''
      // }
      // if(this.form.end_time == null){
      //   this.form.end_time =''
      // }
      // var url = 'user_name='+this.form.user_name+
      //           '&order_no='+this.form.order_no+
      //           '&status='+this.form.status+
      //           '&start_time='+this.form.start_time+
      //           '&end_time='+this.form.end_time+
      //           '&page='+this.form.page+
      //           '&size='+this.form.size+
      //           '&is_export='+this.form.is_export

      let res  = await serviceJoinOrder(this.form)
      if(res.code === 10000){
        if(this.form.is_export === 1) {
        this.form.is_export = 0
        window.open(
          `${API_BASE_URL}/admin/download/zip/${res.data[1].download_token}`
        );
        return;
      }else{
        this.tableData = res.data.data
        this.total = res.data.total
      }
        
      }else{
        this.form.is_export = 0
        this.$message.error(res.message)
      }
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  }
}
</script>
<style lang="scss" scoped>
.shop {
  padding: 20px;
  .search {
    float: right;
  }
  .lookup{
    font-size: 12px;
    cursor: pointer;
    color:#f4222d;
  }
  .pagination{
    float: right;
    margin-top: 12px;
  }
}
</style>
